<!--
  11选5彩球选择器
-->
<template>
  <div class="ball-group">
    <div class="text-grey flex-shrink-0" style="flex-basis: 14.2857%">
      <i class="ball font-lg">{{group}}</i>
      <i>遗漏</i>
    </div>
    <div class="d-flex flex-wrap flex-grow">
      <div class="mb-2" style="flex-basis: 16.6666%" :key="n" v-for="n in 11">
        <b class="ball" :class="{on: value.includes(n)}" @click="select(n)">{{n | pad}}</b>
        <i>{{missing[n - 1] || '--'}}</i>
      </div>
      <div style="flex-basis: 16.6666%" v-if="!max">
        <a class="ball" @click="selectAll">{{value.length == 11 ? '清空' : '全选'}}</a>
      </div>
    </div>
  </div>
</template>

<script>
import { contains, compare } from '../../utils/arrays'

export default {
  name: 'ball-group',
  props: {
    group: String,  // 组名
    rule: String,   // 玩法名
    max: Number,    // 最大选择数
    value: {        // 绑定号码数组
      type: Array,
      default: function () {
        return []
      }
    },
    conflicts: {    // 冲突二维数组
      type: Array,
      default: function () {
        return []
      }
    },
    missing: {      // 遗漏数组
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    select (n) {
      var {value, rule, group, conflicts, max} = this
      var selected = value.slice()
      var idx = selected.indexOf(n)
      if (idx >= 0) {
        selected.splice(idx, 1)
      } else {
        // 最大球数限制
        if (max && selected.length + 1 > max) {
          this.$toast((rule || '') + '最多只能选择' + max + '个' + group)
          return
        }
        /* 若有冲突的列表，先移除冲突列表中的相应号码 */
        if (conflicts) {
          conflicts.forEach(conflict => {
            idx = conflict.indexOf(n)
            if (idx > -1) {
              conflict.splice(idx, 1)
            }
          })
        }
        selected.push(n)
      }
      this.$emit('input', selected.sort(compare))
    },
    selectAll () {
      var {conflicts} = this
      var selected = []
      if (this.value.length < 11) {
        for (var i = 1; i <= 11; i++) {
          if (contains(conflicts, i)) {   // 若其它冲突数组包含该数字，则不添加
            continue
          }
          selected.push(i)
        }
      }
      this.$emit('input', selected)
    }
  }
}
</script>

